<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic Web Audio example</title>
    <style>
      input {
        height: 1.5em;
      }
    </style>
  </head>
  <body>
    <audio src="outfoxing.mp3"></audio>

    <button class="paused">Play</button>
    <br />
    <input type="range" min="0" max="1" step="0.01" value="1" class="volume" />

    <script>
      // Create an AudioContext (cross browser)
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const audioCtx = new AudioContext();

      // store references to our HTML elements
      const audioElement = document.querySelector("audio");
      const playBtn = document.querySelector("button");
      const volumeSlider = document.querySelector(".volume");

      // load the audio source into our audio graph
      const audioSource = audioCtx.createMediaElementSource(audioElement);

      // play/pause audio
      playBtn.addEventListener("click", () => {
        // check if context is in suspended state (autoplay policy)
        if (audioCtx.state === "suspended") {
          audioCtx.resume();
        }

        // if track is stopped, play it
        if (playBtn.getAttribute("class") === "paused") {
          audioElement.play();
          playBtn.setAttribute("class", "playing");
          playBtn.textContent = "Pause";
          // if track is playing, stop it
        } else if (playBtn.getAttribute("class") === "playing") {
          audioElement.pause();
          playBtn.setAttribute("class", "paused");
          playBtn.textContent = "Play";
        }
      });

      // if track ends
      audioElement.addEventListener("ended", () => {
        playBtn.setAttribute("class", "paused");
        playBtn.textContent = "Play";
      });

      // volume
      const gainNode = audioCtx.createGain();

      volumeSlider.addEventListener("input", () => {
        gainNode.gain.value = volumeSlider.value;
      });

      // connect our graph
      audioSource.connect(gainNode).connect(audioCtx.destination);

      // Track credit: Outfoxing the Fox by Kevin MacLeod under Creative Commons
    </script>
  </body>
</html>
